<template>
  <view class="photoDetails allColumnCenter">
    <header-title ref="headerTitle" isDisplayBack title="详情" is-fixed background="#F5F5F5" isShowHome
                  @getPageHeight="getPageHeight" z-index="10">
      <template>
        <view class="photoDetails_headerTitle">
          <text class="photoDetails_headerTitle_text">{{ selectedFamilyDetail.familyName || '暂无家庭名称'}}</text>
        </view>
      </template>
    </header-title>
    <view :style="{height:`${headerHeight}px`}"></view>
    <!-- 照片浏览图 -->
    <view class="photoDetails_browseImage mt-25 allRowCenter">
      <image class="photoDetails_browseImage_image" :src="imageDetail.url" mode="widthFix"></image>

      <view class="photoDetails_browseImage_tips">
        <text class="photoDetails_browseImage_tips_text">{{ selectImage }}/{{ imagesList.length }}</text>
      </view>
    </view>
    <!-- 照片缩略列表 -->
    <view class="photoDetails_scrollView mt-20">
      <view class="photoDetails_scrollView_all row items-center justify-between">
        <image src="/static/shiqin-images/arrow_right.png" class="photoDetails_scrollView_all_leftImage"></image>
        <scroll-view :scroll-left="familyMembersProfileListScroll.scrollLeft" :scroll-x="true"
                     class="photoDetails_scrollView_all_content" scroll-with-animation>
          <view class="photoDetails_scrollView_all_content_photoContent_list allRowCenter" :style="{
              width: selectImage == index+1 ? '80rpx' : '60rpx',
              height: selectImage == index+1 ? '80rpx' : '60rpx'
            }" :id="selectImage == index +1 ? 'photoDetails_scrollView_all_content_photoContent_list':''"
                v-for="(item,index) in imagesList"
                :key="index" @click.stop="selectImageChange(index)">
            <image class="photoDetails_scrollView_all_content_photoContent_list_image" :style="{
              width: selectImage == index+1 ? '80rpx' : '60rpx',
              height: selectImage == index+1 ? '80rpx' : '60rpx'
            }" :src="item.url"
                   mode="aspectFill"></image>
          </view>
        </scroll-view>
        <image src="/static/shiqin-images/arrow_right.png" class="photoDetails_scrollView_all_rightImage"></image>
      </view>
    </view>
    <view class="photoDetails_details">
      <view class="photoDetails_details_setCover allRowCenter mt-30" @click.stop="setCover" v-if="options.is_flag == 1">
        <text class="photoDetails_details_setCover_text">{{
            imageDetail.is_cover != 1 ? '设为个人封面' : '取消个人封面'
          }}
        </text>
      </view>
      <view class="photoDetails_details_setCover allRowCenter mt-30" @click.stop="setCover" v-else>
        <text class="photoDetails_details_setCover_text">{{
            imageDetail.is_cover != 1 ? '设为家庭封面' : '取消家庭封面'
          }}
        </text>
      </view>
      <view class="photoDetails_details_bottom mt-12 row justify-between items-center">
        <view class="photoDetails_details_bottom_left">
          <view class="photoDetails_details_bottom_left_name row items-center mt-12">
            <text class="photoDetails_details_bottom_left_name_text">发布人：{{ imageDetail.username }}</text>
            <!--            <view class="photoDetails_details_bottom_left_name_label allRowCenter ml-6">-->
            <!--              <text class="photoDetails_details_bottom_left_name_label_text">{{}}</text>-->
            <!--            </view>-->
          </view>
          <view class="photoDetails_details_bottom_left_time row items-center mt-7">
            <view class="photoDetails_details_bottom_left_time_content">
              <text class="photoDetails_details_bottom_left_time_content_text">{{ imageDetail.add_time }}</text>
            </view>
            <view class="photoDetails_details_bottom_left_time_delete ml-14" @click.stop="deleteCover">
              <text class="photoDetails_details_bottom_left_time_delete_text">删除</text>
            </view>
          </view>
        </view>
        <view class="photoDetails_details_bottom_right row items-center">
          <view class="uploadPhoto_waterfall_list_bottom_icon allColumnCenter  mr-57">
            <image class="uploadPhoto_waterfall_list_bottom_icon_image"
                   src="/static/shiqin-images/thumbsUp.png"></image>
            <text class="uploadPhoto_waterfall_list_bottom_icon_text mt-6">点赞 {{ imageDetail.click_num }}</text>
          </view>
          <view class="uploadPhoto_waterfall_list_bottom_icon allColumnCenter mr-57">
            <image class="uploadPhoto_waterfall_list_bottom_icon_image"
                   src="/static/shiqin-images/comments.png"></image>
            <text class="uploadPhoto_waterfall_list_bottom_icon_text mt-6">评论 {{ imageDetail.comment }}</text>
          </view>
          <view class="uploadPhoto_waterfall_list_bottom_icon allColumnCenter">
            <image class="uploadPhoto_waterfall_list_bottom_icon_image"
                   src="/static/shiqin-images/share.png"></image>
            <text class="uploadPhoto_waterfall_list_bottom_icon_text mt-6">分享</text>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 75rpx"></view>
  </view>
</template>

<script>
import HeaderTitle from "../../components/shiqinComponents/pageComponents/headerTitle.vue";
import {delGroupCover, getCarousel, groupCoverDetail, setGroupCover} from "../../api/shiqinAPI";

export default {
  components: {HeaderTitle},
  data() {
    return {
      // 封面详情
      imageDetail: {},
      // 头部高度
      headerHeight: 0,
      imagesList: [],
      selectImage: 4,
      familyMembersProfileListScroll: {
        scrollLeft: 0,
        allWidth: 0,
        width: 0,
        selectWidth: 0
      },
      options: {}
    };
  },
  watch: {
    familyMembersProfileListScroll: {
      deep: true,
      handler(newValue, oldValue) {

        this.familyMembersProfileListScroll.scrollLeft = newValue.allWidth - newValue.width / 2 + newValue.selectWidth / 2
      }
    }
  },
  computed: {
    selectedFamilyDetail(){
      return this.$store.state.shiqinStore.selectedFamilyDetail
    }
  },
  onLoad(options) {
    this.options = options
    this.getCoverDetails(options)
    this.getAllCoverDetails(options)
  },
  onReady() {
    this.systemInfo = uni.getSystemInfoSync()
    this.$nextTick(() => {
      this.$refs.headerTitle.getPageHeight()
    })
  },
  methods: {
    getPageHeight(number) {
      this.headerHeight = number
    },
    // 获取封面详情
    async getCoverDetails(options) {
      let {data} = await groupCoverDetail({image_id: options.id})
      this.imageDetail = data.detail
    },
    // 获取所有封面详情
    async getAllCoverDetails(options) {
      let {data} = await getCarousel({image_id: options.id})
      this.imagesList = data.list
      this.selectImage = data.key
      this.selectImageChange(this.selectImage - 1)
    },
    selectImageChange(index) {
      this.selectImage = index + 1
      this.imageDetail = this.imagesList[index]
      setTimeout(() => {
        this.moveTo(index)
      }, 10)
    },
    moveTo(index) {
      const query = uni.createSelectorQuery().in(this)
      query.select('.photoDetails_scrollView_all_content').boundingClientRect(data => {
        this.familyMembersProfileListScroll.width = data.width
      }).exec()
      query.select('#photoDetails_scrollView_all_content_photoContent_list').boundingClientRect(rect => {
        const rpx = this.systemInfo.windowWidth / 750
        this.familyMembersProfileListScroll.selectWidth = rect.width + (8 * rpx)
      }).exec()
      query.selectAll('.photoDetails_scrollView_all_content_photoContent_list').boundingClientRect(rect => {
        if (rect.length > 0) {
          const rpx = this.systemInfo.windowWidth / 750
          console.log(8 * rpx)
          this.familyMembersProfileListScroll.allWidth = 0
          rect.forEach((item, i) => {
            if (i < index) {
              this.familyMembersProfileListScroll.allWidth += (Number(item.width) + (8 * rpx))
            }
          })
        }
      }).exec()
    },
    async deleteCover() {
      let {status, msg} = await delGroupCover({image_id: this.imageDetail.id})
      if (status == 200) {
        this.imagesList.splice(this.selectImage - 1, 1)
        this.imageDetail = this.imagesList[this.selectImage - 1]
      } else {
        uni.showToast({
          title: msg,
          icon: 'none'
        })
      }
    },
    async setCover() {
      let {status, msg} = await setGroupCover({
        image_id: this.imageDetail.id,
        family_id: this.$store.state.shiqinStore.selectedId,
        type: this.imageDetail.is_cover == 1 ? 2 : 1,
        // status: this.options.is_flag == 1 ? 1 : 2,
        status: 2,
        member_id: this.options.member_id || ''
      })
      if (status == '200') {
        uni.showToast({
          title: '设置成功',
          icon: 'none'
        })
        this.$set(this.imageDetail, 'is_cover', this.imageDetail.is_cover != 1 ? 1 : 0)
        this.$set(this.imagesList[this.selectImage - 1], 'is_cover', this.imageDetail.is_cover != 1 ? 1 : 0)
        this.$store.dispatch('setFamilyDetail')
      } else {
        uni.showToast({
          title: msg,
          icon: 'none'
        })
      }
    }
  },
}
</script>

<style lang="scss">
.photoDetails {
  width: 750rpx;
  min-height: 100vh;
  overflow: hidden;
  background: $secondaryPages;

  .photoDetails_headerTitle {
    position: absolute;
    bottom: -26rpx;
    left: 50%;
    transform: translateX(-50%);

    .photoDetails_headerTitle_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 20rpx;
      color: #A0A0A0;
    }
  }

  .photoDetails_browseImage {
    width: 702rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    overflow: hidden;
    background: #000000;
    position: relative;

    .photoDetails_browseImage_image {
      width: 702rpx;
    }

    .photoDetails_browseImage_tips {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 10rpx;

      .photoDetails_browseImage_tips_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 22rpx;
        color: #292929;
      }
    }
  }

  .photoDetails_scrollView {
    width: 656rpx;
    border-bottom: 2rpx solid #707070;

    .photoDetails_scrollView_all {
      .photoDetails_scrollView_all_leftImage {
        width: 25rpx;
        height: 25rpx;
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
      }

      .photoDetails_scrollView_all_content {
        width: 582rpx;
        white-space: nowrap;
        overflow: hidden;

        .photoDetails_scrollView_all_content_photoContent_list {
          display: inline-block;
          width: 60rpx;
          height: 60rpx;
          background: #FFFFFF;
          border: 1rpx solid #707070;
          margin: 0 4rpx;
          overflow: hidden;

          .photoDetails_scrollView_all_content_photoContent_list_image {
            width: 60rpx;
          }
        }
      }

      .photoDetails_scrollView_all_rightImage {
        width: 25rpx;
        height: 25rpx;
      }
    }
  }

  .photoDetails_details {
    width: 656rpx;
    overflow: hidden;

    .photoDetails_details_setCover {
      width: 143rpx;
      height: 43rpx;
      background: #FF4206;
      border-radius: 40rpx 40rpx 40rpx 40rpx;

      .photoDetails_details_setCover_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 22rpx;
        color: #FFFFFF;
      }
    }

    .photoDetails_details_bottom {
      .photoDetails_details_bottom_left {
        .photoDetails_details_bottom_left_name {
          .photoDetails_details_bottom_left_name_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #292929;
          }

          .photoDetails_details_bottom_left_name_label {
            width: 66rpx;
            height: 30rpx;
            background: #FF7950;
            border-radius: 15rpx 15rpx 15rpx 15rpx;

            .photoDetails_details_bottom_left_name_label_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 16rpx;
              color: #FFFFFF;
            }
          }
        }

        .photoDetails_details_bottom_left_time {

          .photoDetails_details_bottom_left_time_content {
            .photoDetails_details_bottom_left_time_content_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 22rpx;
              color: #898989;
            }
          }

          .photoDetails_details_bottom_left_time_delete {
            .photoDetails_details_bottom_left_time_delete_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 22rpx;
              color: #898989;
            }
          }
        }
      }

      .photoDetails_details_bottom_right {
        .uploadPhoto_waterfall_list_bottom_icon {
          .uploadPhoto_waterfall_list_bottom_icon_image {
            width: 35rpx;
            height: 35rpx;
          }

          .uploadPhoto_waterfall_list_bottom_icon_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 18rpx;
            color: #3B3B3B;
          }
        }
      }
    }
  }
}
</style>
